<template>
	<view class="content" :data-theme="themeStyle">
		<view class="head-wrap">
			<!-- 搜索区域 -->
			<view class="search-wrap uni-flex uni-row">
				<view class="flex-item input-wrap">
					<input class="uni-input" maxlength="50" v-model="keyword" confirm-type="search" @confirm="search()" placeholder="请输入您要搜索的商品" />
					<text class="iconfont iconsousuo1" @click.stop="search()"></text>
				</view>
			</view>

			<!-- 排序 -->
			<view class="sort-wrap">
				<view class="comprehensive-wrap" :class="{ 'color-base-text': orderType === '' }" @click="sortTabClick('')">
					<text :class="{ 'color-base-text': orderType === '' }">综合</text>
				</view>
				<view :class="{ 'color-base-text': orderType === 'sale_num' }" @click="sortTabClick('sale_num')">销量</view>
				<view class="price-wrap" @click="sortTabClick('discount_price')">
					<text :class="{ 'color-base-text': orderType === 'discount_price' }">价格</text>
					<view class="iconfont-wrap">
						<view class="iconfont iconshangsanjiao-copy" :class="{ 'color-base-text': priceOrder === 'asc' && orderType === 'discount_price' }"></view>
						<view class="iconfont iconsanjiao" :class="{ 'color-base-text': priceOrder === 'desc' && orderType === 'discount_price' }"></view>
					</view>
				</view>
				<view :class="{ 'color-base-text': orderType === 'screen' }" class="screen-wrap">
					<!-- <view class="iconfont font-size-base" :class="{ iconapps: isList, iconlist1: !isList }" @click="changeListStyle()"></view> -->
					<!-- <text style="padding: 0 14rpx; color: #E3E3E3;">|</text> -->
					<text @click="sortTabClick('screen')">筛选</text>
					<view @click="sortTabClick('screen')" class="iconfont-wrap"><view class="iconfont iconshaixuan color-tip"></view></view>
				</view>
			</view>
		</view>

		<mescroll-uni top="180" ref="mescroll" @getData="getGoodsList">
			<block slot="list">
				<view class="goods-list" :class="isList ? 'single-column' : 'double-column'">
					<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
						<view class="goods-img">
							<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"></image>
							<!-- <view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view> -->
						</view>
						<view class="info-wrap">
							<view class="name-wrap">
								<view class="goods-name">{{ item.goods_name }}</view>
								<view class="goods-label" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
								<view class="goods-sale">
									<text class="color-tip">累积 {{ item.sale_num }} 份</text>
									<text class="split"></text>
									<text class="color-base-text" v-if="item.stock > 30">剩余 {{item.stock}} 份</text>
									<text class="color-base-text" v-else>仅剩 {{item.stock}} 份</text>
								</view>
							</view>
							
							<view>
								<view class="lineheight-clear">
									<view class="member-price-tag member-price-tag-vip-1" v-if="item.member_price && item.member_price == showPrice(item)">
										<image :src="$util.img('upload/uniapp/index/vip_1.png')" mode="widthFix"></image>
										<text>会员价</text>
									</view>
									<view class="member-price-tag member-price-tag-vip-2" v-else-if="item.promotion_type == 1">
										<image :src="$util.img('upload/uniapp/index/vip_2.png')" mode="widthFix"></image>
										<text>折扣价</text>
									</view>
									<view class="discount-price">
										<text class="unit font-size-tag">{{ $lang('common.currencySymbol') }}</text>
										<text class="price fs38">{{ showPrice(item).split('.')[0] }} </text><text class="font-size-toolbar">.{{ showPrice(item).split('.')[1] }}</text>
									</view>
								</view>
								<view class="pro-info">
									<view class="delete-price color-tip">
										<block>
											<text class="unit">{{ $lang('common.currencySymbol') }}</text>
											{{ item.market_price > 0 ? item.market_price : item.price }}
										</block>
									</view>
								</view>
							</view>
							
							<view class="careBox" v-if="item.goods_spec_format">
								<button class="info-btn color-base-bg" @click.stop="getGoodsSkuDetail(item.sku_id)">加入购物车</button>
								<view v-if="item.num" class="tag-num">{{item.num}}</view>
							</view>
							
							<view class="careBox" v-if="!item.goods_spec_format">
								<button v-if="item.num <= 0 || !token" class="info-btn color-base-bg" @click.stop="cartNumChange('add', item)">加入购物车</button>
								<text v-if="item.num > 0" class="iconfont iconjianshao color-base-text" @click.stop="cartNumChange('minus', item)"></text>
								<input v-if="item.num > 0" :value="item.num" readonly disabled="disabled" unselectable="on" />
								<text v-if="item.num > 0" class="iconfont iconadd-fill color-base-text" @click.stop="cartNumChange('add', item)"></text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="goodsList.length == 0 && emptyShow"><ns-empty text="暂无商品"></ns-empty></view>
			</block>
		</mescroll-uni>

		<!-- 筛选弹出框 -->
		<uni-drawer :visible="showScreen" mode="right" @close="showScreen = false" class="screen-wrap">
			<view class="title color-tip">筛选</view>
			<scroll-view scroll-y>
				<!-- 价格筛选项 -->
				<view class="item-wrap">
					<view class="label"><text>价格区间(元)</text></view>
					<view class="price-wrap">
						<input class="uni-input" type="digit" v-model="minPrice" placeholder="最低价" />
						<view class="h-line"></view>
						<input class="uni-input" type="digit" v-model="maxPrice" placeholder="最高价" />
					</view>
				</view>
				<!-- 分类 -->
				<view class="category-list-wrap">
					<text class="first">全部分类</text>
					<view class="class-box">
						<view @click="selectedCategory('')" class="list-wrap"><text :class="{ selected: !categoryId, 'color-base-text': !categoryId }">全部</text></view>
						<view @click="selectedCategory(item.category_id, item.level)" v-for="(item, index) in categoryList" :key="index" class="list-wrap">
							<text :class="{ selected: item.category_id == categoryId, 'color-base-text': item.category_id == categoryId }">{{ item.category_name }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="footer" :class="{ 'safe-area': isIphoneX }">
				<button type="default" class="footer-box" @click="resetData">重置</button>
				<button type="primary" class="footer-box1" @click="screenData">确定</button>
			</view>
		</uni-drawer>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-goods-sku-category ref="goodSkuNew" @refresh="refreshGoodsSkuDetail"></ns-goods-sku-category>
		
		<view class="cart-box" v-if="token" :class="{ active: isIphoneX }">
			<text class="cart-item">已加购<text class="color-base-text">{{cartNumber}}件</text>商品</text>
			<view class="pay-box">
				<text>合计:</text>
				<text class="color-top">￥ <text class="price-top">{{cartPrice.toFixed(2).split('.')[0]}}</text><text>.{{cartPrice.toFixed(2).split('.')[1]}}</text></text>

				<button type="default" class="color-base-bg" @click="pay()">去结算({{cartNumber}})</button>
			</view>
		</view>
	</view>
</template>

<script>
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
import uniTag from '@/components/uni-tag/uni-tag.vue';
import list from '../public/js/list.js';
import globalConfig from '@/common/js/golbalConfig.js';
import nsGoodsSkuCategory from '@/components/ns-goods-sku/ns-goods-sku-category.vue';

export default {
	components: {
		uniDrawer,
		uniTag,
		nsGoodsSkuCategory
	},
	data() {
		return {};
	},
	mixins: [list, globalConfig],
	async mounted() {
		this.$store.dispatch('getCartNumber');
		this.$store.dispatch('getCartPrice');
		this.$store.dispatch('getCartIds');
	}
};
</script>

<style lang="scss">
@import '../public/css/list.scss';
</style>
<style scoped>
>>> .uni-tag--primary.uni-tag--inverted {
	background-color: #f5f5f5 !important;
}

.color-top{
	color: #ff4544;
	font-size: 32rpx !important;
	font-family: PingFang SC;
	font-weight: bold;
}
.price-top{
	margin-right: 0 !important;
	font-size: 40rpx !important;
}
</style>
